<template>
  <div class="order-detail-view view-container">

    <header-module
      left-custom
      padding
    >
      <template #left-con>
        <div>
          <span style="font-size: 16px; margin-right: 20px">订单：{{ datas.order.orderNumber }}</span>
          <el-tag
            type="warning"
            size="small"
          >{{ getStatus() }}</el-tag>
        </div>
      </template>

      <template #btn>
        <el-button
          class="border-btn"
          size="small"
          @click="onBack"
        >返回</el-button>
        <template v-if="datas.order.id">
          <el-button
                  v-auth="{v:['crm:order:distributor:pms','crm:order:terminal:pms','crm:order:agent:pms'],bool:datas.order.orderStatus == 0 || datas.order.orderStatus == -1 || datas.order.orderStatus == 5}"
                  class="delete-btn"
                  size="small"
                  @click="onDelete"
          >删除</el-button>
          <el-button
                  v-auth="{v:['crm:order:distributor:pms','crm:order:terminal:pms','crm:order:agent:pms'],bool:datas.order.orderStatus == 0 || datas.order.orderStatus == -1}"
                  class="main-btn"
                  size="small"
                  type="primary"
                  @click="onEdit"
          >编辑</el-button>
          <el-button
                  v-auth="{v:['crm:order:distributor:pms','crm:order:terminal:pms','crm:order:agent:pms'],bool:datas.order.orderStatus == 2}"
                  class="main-btn"
                  size="small"
                  type="primary"
                  @click="onCancel"
          >取消订单</el-button>
<!--          <template v-if="datas.order.orderType == 1">-->
<!--            <el-button-->
<!--              v-auth="{v:['crm:order:distributor:pms','crm:order:terminal:pms'],bool:datas.order.orderStatus == 0 || datas.order.orderStatus == -1 || datas.order.orderStatus == 5}"-->
<!--              class="delete-btn"-->
<!--              size="small"-->
<!--              @click="onDelete"-->
<!--            >删除</el-button>-->
<!--            <el-button-->
<!--              v-auth="{v:['crm:order:distributor:pms','crm:order:terminal:pms'],bool:datas.order.orderStatus == 0 || datas.order.orderStatus == -1}"-->
<!--              class="main-btn"-->
<!--              size="small"-->
<!--              type="primary"-->
<!--              @click="onEdit"-->
<!--            >编辑</el-button>-->
<!--            <el-button-->
<!--              v-auth="{v:['crm:order:distributor:pms','crm:order:terminal:pms'],bool:datas.order.orderStatus == 2}"-->
<!--              class="main-btn"-->
<!--              size="small"-->
<!--              type="primary"-->
<!--              @click="onCancel"-->
<!--            >取消订单</el-button>-->
<!--          </template>-->
<!--          <template v-else-if="datas.order.orderType == 2">-->
<!--            <el-button-->
<!--              v-auth="{v:['crm:order:terminal:pms'],bool:datas.order.orderStatus == 0 || datas.order.orderStatus == -1 || datas.order.orderStatus == 5}"-->
<!--              class="delete-btn"-->
<!--              size="small"-->
<!--              @click="onDelete"-->
<!--            >删除</el-button>-->
<!--            <el-button-->
<!--              v-auth="{v:['crm:order:terminal:pms'],bool:datas.order.orderStatus == 0 || datas.order.orderStatus == -1}"-->
<!--              class="main-btn"-->
<!--              size="small"-->
<!--              type="primary"-->
<!--              @click="onEdit"-->
<!--            >编辑</el-button>-->
<!--            <el-button-->
<!--              v-auth="{v:['crm:order:terminal:pms'],bool:datas.order.orderStatus == 2}"-->
<!--              class="main-btn"-->
<!--              size="small"-->
<!--              type="primary"-->
<!--              @click="onCancel"-->
<!--            >取消订单</el-button>-->
<!--          </template>-->

<!--          <el-button-->
<!--            v-auth="{v:['crm:order:delivery:pms'],bool:(datas.order.orderStatus == 2 || datas.order.orderStatus == 3) && !datas.order.ifAllDelivery}"-->
<!--            class="main-btn"-->
<!--            size="small"-->
<!--            type="primary"-->
<!--            @click="onDelivery"-->
<!--          >发货</el-button>-->
<!--          <el-button-->
<!--            v-auth="{v:['crm:order:goods:pms'],bool:datas.order.orderStatus == 3 || datas.order.orderStatus == 4}"-->
<!--            class="main-btn"-->
<!--            size="small"-->
<!--            type="primary"-->
<!--            @click="onGoods"-->
<!--          >确认收货</el-button>-->
        </template>

      </template>

    </header-module>

    <div class="info-container">
      <infomation-view :datas="datas.order" />
    </div>

    <div class="main-content">

      <el-tabs
        v-model="activeName"
        class="elTabs"
        @tab-click="handleClick"
      >
        <el-tab-pane
          label="订单产品"
          name="first"
        >
          <order-product-view :datas="datas" />
        </el-tab-pane>
        <el-tab-pane
                v-if="datas.order.orderStatus > 1"
          label="发货记录"
          name="second"
        >
          <delivery-record-view
            ref="refRecord"
            :datas="datas"
          />
        </el-tab-pane>
        <el-tab-pane
          label="操作记录"
          name="third"
        >
          <operation-view mode="order" />
        </el-tab-pane>
      </el-tabs>

    </div>

    <delivery-dialog
      ref="refDelivery"
      @success="refreshData"
    />

  </div>
</template>

<script>
import {useRoute, useRouter} from 'vue-router'
import {defineAsyncComponent, defineComponent, getCurrentInstance, inject, onBeforeMount, reactive, toRefs,} from 'vue'

export default defineComponent({
  name: 'Index',
  components: {
    infomationView: defineAsyncComponent(() =>
      import('./modules/infomationView.vue')
    ),
    orderProductView: defineAsyncComponent(() =>
      import('./modules/orderProductView.vue')
    ),
    deliveryRecordView: defineAsyncComponent(() =>
      import('./modules/deliveryRecordView.vue')
    ),
    deliveryDialog: defineAsyncComponent(() =>
      import('../modules/deliveryDialog.vue')
    ),
  },
  setup() {
    const currentInstance = getCurrentInstance()
    const route = useRoute()
    const router = useRouter()
    const api = inject('api')

    var data = reactive({
      datas: {
        order: {
          isSplit: 0,
        },
        orderDetail: [],
      },
      activeName: 'first',
      refDelivery: null,
      refRecord: null,
    })

    const handleClick = () => {}

    const onDelete = (row) => {
      currentInstance.proxy
        .alertBox({
          message: '是否确认删除此订单？',
          title: '删除',
        })
        .then(() => {
          api.order.ORDER_DELETE(data.datas.order.id).then((res) => {
            if (res.code) {
              currentInstance.proxy.customMessage({
                type: 'error',
                message: res.msg,
              })
            } else {
              currentInstance.proxy.customMessage({
                type: 'success',
                message: '删除成功',
              })
              router.back()
            }
          })
        })
        .catch((err) => {
          console.log(err)
        })
    }

    const getData = (id) => {
      api.order.GET_ORDER_DETAIL(id).then((res) => {
        if (!res.code && res.data) {
          data.datas = res.data.order
        }
      })
    }

    const onCancel = () => {
      currentInstance.proxy
        .alertBox({
          message: '是否确认取消订单？',
          title: '取消订单',
        })
        .then(() => {
          api.order.ORDER_CANCEL(data.datas.order.id).then((res) => {
            if (!res.code) {
              currentInstance.proxy.customMessage({
                type: 'success',
                message: '操作成功',
              })
              getData(route.query.id)
            } else {
              currentInstance.proxy.customMessage({
                type: 'error',
                message: res.msg,
              })
            }
          })
        })
        .catch((err) => {
          console.log(err)
        })
    }

    const onGoods = () => {
      let hint = '确认收货后将结束订单，是否要进行确认收货操作?'
      if (!data.datas.order.ifAllDelivery) {
        hint =
          '该订单仍有部分产品未全部发货，确认订单后将结束订单，不能继续发货，是否要进行确认收货操作?'
      }
      currentInstance.proxy
        .alertBox({
          message: hint,
          title: '确认收货',
        })
        .then(() => {
          api.order.ORDER_CONFIRM_GOODS(data.datas.order.id).then((res) => {
            if (!res.code) {
              currentInstance.proxy.customMessage({
                type: 'success',
                message: '操作成功',
              })
              getData(route.query.id)
            } else {
              currentInstance.proxy.customMessage({
                type: 'error',
                message: res.msg,
              })
            }
          })
        })
        .catch((err) => {
          console.log(err)
        })
    }

    const onBack = () => {
      router.back()
    }

    const onEdit = () => {

      if (data.datas.order.orderType == '2') {
        router.push({ name: 'addOrder1', query: { id: data.datas.order.id } })
      } else if (data.datas.order.orderType == '1') {
        router.push({ name: 'addOrder', query: { id: data.datas.order.id } })
      } else {
        router.push({ name: 'addAgentOrder', query: { id: data.datas.order.id } })
      }
    }

    const onDelivery = () => {
      data.refDelivery.openDialog(data.datas)
    }

    const refreshData = () => {
      getData(route.query.id)
      if (data.refRecord) {
        data.refRecord.getListData()
      }
    }

    const getStatus = () => {
      let str = ''
      switch (data.datas.order.orderStatus) {
        case '-1':
          str = '审核未通过'
          break
        case '0':
          str = '草稿'
          break
        case '1':
          str = '审核中'
          break
        case '2':
          str = '待发货'
          break
        case '3':
          str = '已发货（部分发货）'
          break
        case '4':
          str = '已发货'
          break
        case '5':
          str = '已取消'
          break
        case '6':
          str = '已收货'
          break
      }

      return str
    }

    onBeforeMount(() => {
      if (route.query.id) {
        getData(route.query.id)
      }
    })

    return {
      ...toRefs(data),

      onCancel,
      handleClick,
      onBack,
      onGoods,
      onDelivery,
      onEdit,
      getStatus,
      refreshData,
      onDelete,
    }
  },
})
</script>

<style scoped>
</style>
